D3.js svg导出jpeg

经过几个月的开发d3也差不多入门了，到了后期优化的阶段了。

导出的jpeg模糊问题

甲方觉得导出的jpeg清晰度不够不如截图(其实真的不如截图)，谁让人家是甲方呢，只能优化了。

优化方法

经过一番百度之后 我采用了将原图放大诺干倍再使用canvas缩小回来的方法
代码如下

var serializer = new XMLSerializer();
var source = '<?xml version="1.0" standalone="no"?>\r\n' + serializer.serializeToString($(".svg-wrap svg")[0]);
source = source.replace('display:none', '');
var image = new Image;
image.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source);
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
const ratio = 3;//放大倍数增加清晰度
canvas.width = (672 - 16*4)* ratio;
canvas.height = (528 - 16*4)* ratio;
canvas.style.width = (672 - 16*4) + 'px';
canvas.style.height = (528 - 16*4) + 'px';
context.scale(ratio, ratio);
context.fillStyle = '#fff';//#fff设置保存后的PNG 是白色的  
context.fillRect(0, 0, 10000, 10000);
image.onload = function() {  
    context.drawImage(image, 0, 0);  
    var a = document.createElement("a");  
    a.download = that.name;  
    a.target="_blank"
    a.href = canvas.toDataURL("image/jpeg");
    window.open()
    a.click();
}

Demo

demo链接
柱形图示例